<template>
	<NavBar :obj="{ title: title, color: '#000', backgroundColor: '#fff' }" />
	<view class="total flex items-center justify-between">
		<view class="total-item flex items-center justify-between flex-col">
			<view class="val">{{ total.push_num }}</view>
			<view class="tips">直推人数</view>
		</view>
		<view class="total-item flex items-center justify-between flex-col">
			<view class="val">{{ total.team_num }}</view>
			<view class="tips">团队人数</view>
		</view>
	</view>
	<view class="fill">
		<view class="title">
			直推用户
			<!-- <text>({{ count }})</text> -->
		</view>
		<view class="show-load" v-if="showLoad">
			<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
		</view>
		<view class="item flex items-center justify-between" v-for="(item, index) in list" :key="index" @click="next(item)">
			<view class="left">
				<image :src="imgUrl + item.photo" class="photo"></image>
			</view>
			<view class="middle flex-1">
				<view class="flex items-center">
					<view class="nickname">{{ item.nickname }}</view>
				</view>
				<view class="fix flex items-center">
					<view class="mobile">{{ item.mobile }}</view>
					<view class="time">ID：{{ item.code }}</view>
				</view>
			</view>
			<view class="right flex items-center justify-between flex-col">
				<view class="val">{{ item.my_total }}</view>
				<view class="tips">消费总额</view>
			</view>
		</view>
		<view class="empty" style="padding-bottom: 20%" v-if="!list.length && !showLoad">
			<up-empty icon="/static/product/ic_zerodata@2x.png" iconSize="392rpx" marginTop="20%" text="暂无" />
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { port, imgUrl, goUrl } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';

	const list = ref([]);

	const count = ref(0);
	const total = ref({});
	const listRef = ref({
		page: 1,
		uid: ''
	});
	const showLoad = ref(true);

	const title = ref('');
	onLoad((e) => {
		title.value = e.title;
	});

	onShow(() => {
		listRef.value.page = 1;
		list.value.length = 0;
		getUserTeamList();
		getUserTeamTotal();
	});

	onReachBottom(() => {
		getUserTeamList();
	});

	async function getUserTeamTotal() {
		let res = await port('getUserTeamTotal');
		total.value = res.data;
	}

	async function getUserTeamList() {
		let res = await port('getUserTeamList', listRef.value);

		if (res.data.length) {
			list.value = [...list.value, ...res.data];
			listRef.value.page++;
		}
		count.value = res.count;
		showLoad.value = false;
	}
</script>

<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}

	.total {
		background: #ffffff;
		border-radius: 0rpx 0rpx 30rpx 30rpx;
		padding: 40rpx 0;

		.total-item {
			width: 50%;
			.val {
				font-weight: 500;
				font-size: 42rpx;
				color: #000000;
			}
			.tips {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 15rpx;
			}
		}
	}

	.show-load {
		padding: 30rpx;
	}

	.mt-24 {
		margin-top: 24rpx;
	}
	.fill {
		margin-top: 24rpx;
		background-color: #fff;
		padding: 0 30rpx;
		.title {
			font-weight: 500;
			font-size: 34rpx;
			color: #000000;
			padding: 24rpx 0 14rpx 0;
			> text {
				font-size: 26rpx;
			}
		}

		.item {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #eeeeee;

			&:last-child {
				border-bottom: none;
			}
			.left {
				width: 94rpx;
				height: 94rpx;
				background: #f2f2f2;
				border-radius: 50%;
				// border: 2px solid #fb8f04;
				.photo {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.middle {
				margin-left: 22rpx;
				.nickname {
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
				}
				.fix {
					margin-top: 22rpx;
					.mobile {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
					}
					.time {
						font-weight: 400;
						font-size: 22rpx;
						color: #999999;
						margin-left: 29rpx;
					}
				}
			}
			.right {
				.val {
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
				}
				.tips {
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
